import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:top_foundation/component/page_state/widgets/empty.dart';
import 'package:whale/helper/component/component.dart';
import 'package:whale/helper/utils/util.dart';
import 'package:whale/pages/means/subs/means_detail/index.dart';

class MeansDetailArticleView extends GetView<MeansDetailController> {
  const MeansDetailArticleView({
    Key? key,
    required this.data,
  }) : super(key: key);
  final String data;
  @override
  Widget build(BuildContext context) {
    var state = controller.state;

    return data.isEmpty
        ? SingleChildScrollView(
            child: noDataView(),
          )
        : Container(
            padding: EdgeInsets.all(15.r),
            color: Color(0xffF4F6FA),
            child: Container(
              padding: EdgeInsets.all(15.r),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(3.r)
              ),
              child: SingleChildScrollView(
                child: Html(
                  shrinkWrap: true,
                  data: data,
                  tagsList: Html.tags..addAll(['span']),
                  style: {
                    'span': Style(
                      textDecorationStyle: TextDecorationStyle.solid,
                      textDecorationColor: Colors.blue,
                      textDecoration: TextDecoration.underline,
                    )
                  },
                  customRenders: {
                    tagMatcher('span'): CustomRender.inlineSpan(
                      inlineSpan: (context, buildChildren) {
                        return TextSpan(
                          children: [
                            WidgetSpan(
                                child: Container(
                                  width: 14.r,
                                  height: 14.r,
                                  margin: const EdgeInsets.only(right: 5),
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: ColorsUtil.theme,
                                    borderRadius: BorderRadius.circular(7.r),
                                  ),
                                  child: Text(
                                    controller
                                        .getNoteIndex(
                                        context.tree.element?.attributes)
                                        .toString(),
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 10.sp,
                                    ),
                                  ),
                                )),
                            TextSpan(
                                text: (context.tree.element?.innerHtml ?? ''),
                                style: const TextStyle(
                                  color: ColorsUtil.theme,
                                  decoration: TextDecoration.underline,
                                  decorationColor: Colors.blue,
                                  decorationStyle: TextDecorationStyle.solid,
                                ),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    var attr = context.tree.element?.attributes;
                                    var id = controller.getNoteId(attr);
                                    if (id != null) {
                                      Get.log(id);
                                      controller.actionTapTag(id);
                                    }
                                  })
                          ],
                        );
                      },
                    ),
                  },
                ),
              ),
            ),
          );
  }
}
